<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise对象</title>
</head>
<body>
<!--
1. 理解:
  * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
  * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
  * ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):
  * 创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
  * 调用promise的then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
3. promise对象的3个状态
  * pending: 初始化状态
  * fullfilled: 成功状态
  * rejected: 失败状态
4. 应用:
  * 使用promise实现超时处理

  * 使用promise封装处理ajax请求
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    }
    request.responseType = 'json';
    request.open("GET", url);
    request.send();
-->

<script type="text/javascript">
//模拟新闻请求过程,现请求的新闻,然后在请求评论
// 封装Ajax的请求
function getData(method,url,async,data){
	//创建 promis 对象
	let promise = new Promise((resolve,reject) => {
		// 创建异步/同步请求对象
		let xmlHttp = null;
		if (window.XMLHttpRequest){// code for all new browsers
		  xmlHttp=new XMLHttpRequest();
		} else if (window.ActiveXObject){// code for IE5 and IE6
		  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (xmlHttp!=null){
			// 绑定监听 readstate xmlHttp 默认是发送四次请求
		  xmlHttp.onreadystatechange = function(){
		  	if(xmlHttp.readyState == 4){
		  		if(xmlHttp.status == 200){//请求成功
		  			resolve(xmlHttp.responseText);//修改promise的状态为成功状态
		  		}else{//请求失败
		  			reject("您的请求失败!");//修改promis的状态为失败状态
		  		}
		  	}
		  };
		  xmlHttp.open(method,url,async);//开始请求
		  xmlHttp.send(data);//发送数据
	  }else{
		  alert("很遗憾,你的浏览器不支持 XMLHTTP.");
	  }
	})
	
	return promise; //返回promise对象
	
}

getData("POST","http://www.runoob.com/try/ajax/demo_post.php",true,null)	
	.then((data) => {//成功之后调用
		console.log(data);
		//继续调用返回 promis 对象
		return getData("POST","http://www.runoob.com/try/ajax/demo_post.php",true,null)
	},(error) => {//失败之后调用
		console.log(error);
	})
	.then((data) => {//成功之后调用
		console.log(data);
		//根据需求继续调用
//		return getData("POST","http://index.baidu.com",true,{tpl:"trend",word:"baidu"})
	},(error) => {//失败之后调用
		console.log(error);
	});



</script>

</body>

</html>